<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <!-- 标题 -->
      <div class="header-title">
        <p id="robotxj">南市机器人巡检监控</p>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 左边 -->
      <div class="contentLsft">
        <!-- 机器人数据-->
        <div class="Robot-par">
          <div class="par-title">
            <p>机器人数据</p>
            <el-select  v-model="Selection" placeholder="请选择机器人" @change="handleChange">
              <el-option v-for="item in robotList" :key="item.id" :label="item.robot_name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="par-conter">
            <div class="par-conter1">
              <img src="../images/robot.png" alt="">
              <div class="par-conterText">
                <p><router-link :to="'/nssc/report'">当前报告 {{ reports }}</router-link></p>
              </div>
            </div>
            <div class="par-conter2">
              <img src="../images/robot001.png" alt="">
              <div class="par-conterText">
                <p><router-link :to="'/nssc/alarm/alarmData'">当前告警 {{ alarms }}</router-link></p>
              </div>
            </div>
            <div class="par-conter3">
              <img v-if="this.online == -1 || this.robotid == null" src="../images/camera (1).png" alt="">
              <img v-else src="../images/camera.png" alt="">
              <div class="par-conterText">
                <p v-if="this.online == -1 || this.robotid == null" style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color: #bdbbbb;
                                  -webkit-background-clip: text;">摄像头离线</p>
                <span v-else style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color:#4AF4BE;
                                  -webkit-background-clip: text;
                                  ">摄像头在线</span>
              </div>
            </div>
            <div class="par-conter4">
              <img v-if="robot_state == 1" src="../images/online.png" alt="">
              <img v-else src="../images/notonline.png" alt="">
              <div class="par-conterText">
                <p v-if="robot_state == 1" style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color:#4AF4BE;
                                  -webkit-background-clip: text;
                                  ">机器人在线</p>
                <p v-else style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color: #bdbbbb;
                                  -webkit-background-clip: text;">机器人离线</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 机器人运行数据 -->
        <div class="Robot-ope">
          <div class="ope-title">
            <p>机器人运行数据</p>
          </div>
          <div class="ope-conter">
            <div class="ope-conter1">
              <div class="ope-conter1-1">
                <p>{{ jqrsd }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>速度</p>
              </div>
            </div>
            <div class="ope-conter2">
              <div class="ope-conter1-1">
                <p>{{ jqrfx }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>方向</p>
              </div>
            </div>
            <div class="ope-conter3">
              <div class="ope-conter1-1">
                <p>{{ jqrms }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>模式</p>
              </div>
            </div>
            <div class="ope-conter4">
              <div class="ope-conter1-1">
                <p>{{ djzs }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>转速</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="contentCenter">
        <!-- 监控画面 -->
        <div class="center-video">
          <!-- 监控画面 -->
          <div class="box">
            <video v-show="videoShow" id="HKvideo" class="video-js" style="width:98.5%;height:97.5%" controls autoplay
                   autobuffer muted preload="auto" disablePictureInPicture="true" controlslist="nodownload">
            </video>
          </div>
        </div>
        <!-- 电子轨道图 -->
        <div class="center-Trd">
          <!-- 图标部分 -->
          <div class="Trd-icon">
            <div class="Trd-icon1">
<!--              <div class="Trd-icon1-1">
                <img src="../images/contorll.png" alt="">
                <p style="color: #dcdcdc">巡检点</p>
              </div>
              <div class="Trd-icon1-2">
                <img src="../images/contorl.png" alt="">
                <p style="color: #dcdcdc">机器人</p>
              </div>-->
              <div class="Trd-icon1-3">
                <span></span>
                <p style="color: #dcdcdc">位移<font style="color: #5DCBFF"> {{ sswy }}</font> m</p>
              </div>
              <div class="Trd-icon1-4">
                <span></span>
                <p style="color: #dcdcdc">电压
                  <font style="color: #138047;" v-if="dcdy > 70">{{ dcdy }}</font>
                  <font style="color: #0e8618;" v-else-if="dcdy > 50">{{ dcdy }}</font>
                  <font style="color: #29ab33;" v-else-if="dcdy > 40">{{ dcdy }}</font>
                  <font style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}</font>
                  <font style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}</font>
                  <font style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}</font>
                  <font style="color: #5DCBFF;" v-else-if="dcdy=='无'">{{ dcdy }}</font>
                  <font style="color: #e19532;" v-else>{{ dcdy }}</font>
                  v</p>
              </div>
              <div class="Trd-icon1-5">
                <span></span>
                <p style="color: #dcdcdc">电量
                  <font style="color: #30a96a;" v-if="dcdl > 80">{{ dcdl }}</font>
                  <font style="color: #46cc51;" v-else-if="dcdl > 70">{{ dcdl }}</font>
                  <font style="color: #9eee25;" v-else-if="dcdl > 60">{{ dcdl }}</font>
                  <font style="color: #9eee25;" v-else-if="dcdl > 50">{{ dcdl }}</font>
                  <font style="color: #a5f1a6;" v-else-if="dcdl > 30">{{ dcdl }}</font>
                  <font style="color: #e19532;" v-else-if="dcdl > 20">{{ dcdl }}</font>
                  <font style="color: #5DCBFF;" v-else-if="dcdl=='无'">{{ dcdl }}</font>
                  <font style="color: #de5c23;" v-else>{{ dcdl }}</font>
                  %</p>
              </div>
              <div class="Trd-icon1-6">
                <span></span>
                <p style="color: #dcdcdc">电机
                  <font style="color: #5DCBFF;">{{ dj }}</font>
                </p>
              </div>
<!--              <div class="Trd-icon1-7">
                <span></span>
                <p style="color: #dcdcdc">照明灯
                  <font style="color: #5DCBFF;">{{ zmd }}</font>
                </p>
              </div>-->
            </div>
          </div>
          <!-- 地图部分 -->
          <div class="Trd-map1" v-if="typeof this.result == 'undefined' || this.result == null">
              暂无电子地图</div>
          <div class="Trd-map" v-else ref="chinaMapChart"></div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="contentRight">
        <!-- 采集结果 -->
        <div class="Collection-result">
          <div class="cj-title">
            <p>采集结果</p>
          </div>
          <div class="cj-content">
            <vue-seamless-scroll :data="ulData" style="height:300px; width:100%">
              <ul class="list">
                <li v-for="(ulData, index) in ulData" :key="index">
                  <span class="span1" :title="ulData.name">{{ ulData.name}}</span>
                  <span>{{ ulData.time }}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>

        <!-- 滤池运行评价指数 -->
        <div class="Filter">
          <div class="Filter-title">
            <p>滤池运行评价指标</p>
          </div>

          <!-- echarts部分 -->
          <div class="FilterBox">
       <div class="FilterBox1">
              <div class="time" @click="Timeclick">
                <p><router-link :to="'/nssc/lczb/zhzb'">更多</router-link></p>
                <span v-show="isShow"></span>
              </div>
         <!--  <div class="days" @click="Daysclick">
                 <p>近7日</p>
                 <span v-show="isShow1"></span>
               </div>
               <div class="month" @click="Monthclick">
                 <p>近1月</p>
                 <span v-show="isShow2"></span>
               </div>-->
             </div>
            <div class="Filter-echarts" ref="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import rbt from '@/assets/images/rbt1.png'
import rbt1 from '@/assets/imgs/rbt4.png';
import point from '@/assets/imgs/point1.png';
import { HKonline } from "@/api/nssc/hkvideo/video";
import {getTrackMaprobot,jqrdataCmd,listonPageRobotConfig,reportsAlarmsGather,ippingCmd} from "@/api/nssc/home/home";
import $ from "jquery";
let myChart = null;
let myChart1 = null;
export default {
  data() {
    return {
      robot_state: -1,//在线离线
      Selection: localStorage.getItem("robot_name"),//当前选中的机器人id
      robotid: localStorage.getItem("robot_config_id"),
      index: 0,
      ulData: [
        {name: '暂无数据！',time: ''}
      ],
      videoShow: false,
      online: -1,//在线或离线，默认离线
      isShow: true,//默认显示实时的小横条
      isShow1: false,
      isShow2: false,
      count: 0,
      result: [],
      webRtcServer: null,//摄像头服务
      jqrfx: '无', //机器人方向
      jqrsd: '无',//机器人速度设定
      jqrms: '无',//机器人模式
      sswy: '无',//实时位移
      djzs: '0',//电机转速
      dcdy:'无',//电池电压
      dcdl:'无',//电池电量
      dj :"无",
      zmd :"无",
      reports: '0',//当前报告
      alarms: '0',//当前告警
      timer: null,//定时器
      robotList: [], //机器人列表
      queryParams: {
        robot_name: undefined //机器人名称
      }, queryparms4: {
        valu: undefined,
        video_ip1: localStorage.getItem("video_ip1"),
        video_name1: localStorage.getItem("video_name1"),
        video_pwd1: localStorage.getItem("video_pwd1"),
        video_port1: localStorage.getItem("video_port1"),
        robot_config_id: localStorage.getItem("robot_config_id"),
      }, queryParams2: {
        robotid: undefined,
      }, queryParams3: {
        robotid: undefined,
      }, queryParams4: {
        robot_config_id: undefined,
      }
    }
  },
  created() {
    //初始化页面加载方法
    this.getList()//机器人列表
    this.getMap();//电子地图
    this.reportsAlarmsGather()//当前机器人告警、报告数量、采集结果
  },
  mounted() {//加载完页面加载方法
    this.pjzscharts();//滤池评价指数图
    //标题初始化
    $("#robotxj").text(localStorage.getItem("robot_name") == null ? "南市水厂巡检监控" : localStorage.getItem("robot_name") + "巡检监控");
    //定时器轮询程序
    this.timer = setInterval(() => {
      this.getList()//机器人列表
      this.getMap();//电子地图
      this.reportsAlarmsGather()//当前机器人告警、报告数量、采集结果
      this.robotdata()//当前机器人数据
      if (this.index++ >= this.ulData.length) this.index = 0;//采集结果
      console.log("首页定时")
    }, 2000)
    this.spbf_HKonlines();//挂在完成后播放当前的监控视频 摄像头播放 摄像头状态
  },
  beforeDestroy() { //清除定时器
    if(myChart != null){myChart.clear();myChart = null;}
    if(myChart1 != null){myChart1.clear();myChart1 = null;}
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
    if (this.webRtcServer != null) {
      this.webRtcServer.disconnect();
      this.webRtcServer = null
    }
  },
  methods: {
    handleChange(value) {
      const selectedRobot = this.robotList.find(item => item.id === value);
      //摄像头相关
      if (this.webRtcServer != null) {
        this.webRtcServer.disconnect();
        this.webRtcServer = null
      }
      localStorage.removeItem("video_ip1");//删除1摄像头ip
      localStorage.removeItem("video_port1");//删除1摄像头端口
      localStorage.removeItem("video_name1");//删除1摄像头账号
      localStorage.removeItem("video_pwd1");//删除1摄像头密码
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_state");//删除机器人状态
      localStorage.setItem("video_ip1", selectedRobot.video_ip1);//存储值
      localStorage.setItem("video_port1", selectedRobot.video_port1);//存储值
      localStorage.setItem("video_name1", selectedRobot.video_name1);//存储值
      localStorage.setItem("video_pwd1", selectedRobot.video_pwd1);//存储值
      localStorage.setItem("robot_name", selectedRobot.robot_name);//存储值
      localStorage.setItem("robot_config_id", selectedRobot.id);//存储值
      localStorage.setItem("robot_state", selectedRobot.robot_state);//存储值
      this.robot_name = localStorage.getItem("robot_name")
      this.robot_state = localStorage.getItem("robot_state")
      this.robotid = localStorage.getItem("robot_config_id")
      //摄像头参数
      this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
      this.queryparms4.video_name1 = localStorage.getItem("video_name1");
      this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
      this.queryparms4.video_port1 = localStorage.getItem("video_port1");
      this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
      $("#robotxj").text(localStorage.getItem("robot_name") == null ? "南市水厂巡检监控" : localStorage.getItem("robot_name") + "巡检监控");
      //this.isShowP = false
      this.spbf_HKonlines();//摄像头视频播放 摄像头状态
    },//摄像头视频播放 摄像头状态
    spbf_HKonlines() {
       ippingCmd(localStorage.getItem("video_ip1")).then(response => {
         if (typeof (response) != null && response.data != null && response.data == true)
         this.spbf(); //挂在完成后播放当前的监控视频,摄像头播放
      });
      this.HKonlines(); //摄像头在线离线状态
    },//摄像头视频播放
    spbf() {
      if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
        this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
        this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch1/main/av_stream')
      }
    },//摄像头在线或离线状态
    HKonlines() {
      if (localStorage.getItem("video_ip1") != null
          && localStorage.getItem("video_name1") != null
          && localStorage.getItem("video_pwd1") != null
          && localStorage.getItem("video_port1") != null
          && localStorage.getItem("robot_config_id") != null
      ) {
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        HKonline(this.queryparms4).then(response => {
          this.online = response.data[0].hKloginValue
          //判断是否展示视频
          if (this.online != -1) {
            this.videoShow = true  //摄像头在线则展示视频画面
          } else {
            this.videoShow = false  //摄像头不在线则不展示视频画面
          }
        });
      } else {
        this.$modal.msg("海康摄像头账号为空")
        this.videoShow = false //账号为空则不展示视频画面
      }
    },//查询机器人列表
    getList() {
      this.loading = true;
      listonPageRobotConfig().then(response => {
        this.robotList = response.rows;
        this.robot_state = localStorage.getItem("robot_state")
        for (let j = 0; j < this.robotList.length; j++) {
          if (this.robotList[j].id == localStorage.getItem("robot_config_id")) {
            this.robot_state = this.robotList[j].robot_state
            break
          }
        }
        this.loading = false;
      });
    },//当前机器人数据
    robotdata() {
      this.queryParams3.robotid = localStorage.getItem("robot_config_id");
      if (typeof this.queryParams3.robotid != "undefined" && this.queryParams3.robotid != null) {
        jqrdataCmd(this.queryParams3).then(response => {
          if (typeof (response.data) != "undefined" && response.data != null) {
            this.jqrfx = response.data.jqrfx == null || response.data.jqrfx == ""|| response.data.jqrfx == "null"? "无" : response.data.jqrfx; //机器人方向
            this.jqrsd = response.data.jqrsd == null || response.data.jqrsd == ""|| response.data.jqrsd == "null" ? "无" : response.data.jqrsd;//机器人速度设定
            this.jqrms = response.data.jqrms == null || response.data.jqrms == "" || response.data.jqrms == "null" ? "无" : response.data.jqrms; //机器人模式
            this.sswy = response.data.sswy == null || response.data.sswy == ""|| response.data.sswy == "null" ? "0" : response.data.sswy;//实时位移
            this.djzs = response.data.djzs == null || response.data.djzs == "" || response.data.djzs == "null"  ? "无" : response.data.djzs;//电机转速
            this.dcdl = response.data.dcdl == null||response.data.dcdl == "" ||response.data.dcdl == "null" ? "无" : response.data.dcdl;//电池电量
            this.dcdy = response.data.dcdy == null||response.data.dcdy == ""||response.data.dcdy == "null" ? "无" : response.data.dcdy;//电池电压
            this.sxt = response.data.sxt == null||response.data.sxt == ""||response.data.sxt == "null" ? "无" : response.data.sxt;//摄像头状态
            this.dj = response.data.dj == null||response.data.dj == ""||response.data.dj == "null" ? "无" : response.data.dj;//电机
          } else {
            this.jqrfx = "无"; //机器人方向
            this.jqrsd = "无";//机器人速度设定
            this.jqrms = "无"; //机器人模式
            this.sswy = "无";//实时位移
            this.dcdl = "无"; //电池电量
            this.dcdy = "无"; //电池电压
            this.djzs = "无";//电机转速
            this.dj = "无";
            this.zmd ="无";
          }
        });
      } else {
        this.jqrfx = "无"; //机器人方向
        this.jqrsd = "无";//机器人速度设定
        this.jqrms = "无"; //机器人模式
        this.sswy = "无";//实时位移
        this.dcdl = "无"; //电池电量
        this.dcdy = "无"; //电池电压
        this.djzs = "无";//电机转速
        this.dj = "无";
        this.zmd ="无";
      }
    },//当前机器人告警、报告数量
    reportsAlarmsGather() {
      this.queryParams4.robot_config_id = localStorage.getItem("robot_config_id");
      if (typeof this.queryParams4.robot_config_id != "undefined" && this.queryParams4.robot_config_id != null) {
        reportsAlarmsGather(this.queryParams4).then(response => {
          if (typeof (response.data) != "undefined" && response.data != null) {
            if(response.data.reportalarm != null && response.data.reportalarm.length == 2 ) {
              this.reports = response.data.reportalarm[0].bgbjct; //当前报告
              this.alarms = response.data.reportalarm[1].bgbjct; //当前告警
            }//采集结果
            this.ulData = (response.data.gather != null && response.data.gather.length > 0)?response.data.gather:this.ulData;
          }
        });
      }
    },//电子地图
    getMap() {
      this.queryParams2.robotid = localStorage.getItem("robot_config_id")
        getTrackMaprobot(this.queryParams2).then(response => {
          if (typeof (response) != "undefined" && response != null && response.data != null && response.data.dzdt.length > 0) {
            this.result = response.data.dzdt;
            this.arrdata = [[]];//初始化地图值
            //机器人运行轨迹 轨道地图数据;如果有当前巡检点位置坐标获取当前位置坐标
            if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
              let positionxy = response.data.positionxy.split(",");//xy坐标
              localStorage.removeItem("xposition");//删除键值  机器人开始位置x坐标
              localStorage.removeItem("yposition");//删除键值 机器人开始位置y坐标
              localStorage.removeItem("xjbh");//删除键值 机器人开始位置y坐标
              localStorage.setItem("xposition", positionxy[0]);//存储值 机器人开始位置x坐标
              localStorage.setItem("yposition", positionxy[1]);//存储值 机器人开始位置y坐标
              localStorage.setItem("xjbh", response.data.xjbh);//存储值 巡检点编号
            }
            for (let i = 0; i < this.result.length; i++) {
              //因为后台取出来的数据是一行的，字符串形式
              let dataArray = this.result[i].xyposition.split(",");
              //这句话是必须的，每次都要新建一个一维数组,不然会报错
              this.arrdata[i] = new Array();
              for (let j = 0; j < dataArray.length; j++) {
                this.arrdata[i][j] = dataArray[j];
              }
            }
            //电子地图
            const dtop = this.arrdata;
            if (this.count % 2 == 0)
              this.initEcharts(dtop, localStorage.getItem("xposition"), localStorage.getItem("yposition"), localStorage.getItem("xjbh"), 1);//交替getMap
            else
              this.initEcharts(dtop, localStorage.getItem("xposition"), localStorage.getItem("yposition"), localStorage.getItem("xjbh"), 2);
            this.count += 1;
          } else {
            if(myChart != null) myChart.dispose()//销毁echarts
            this.result = null;
          }
        });
    },//电子轨道图方法
    initEcharts(dtop, xposition, yposition, xjbh,fg) {
      if (this.$refs.chinaMapChart) {
        this.$nextTick(() => {
          myChart = echarts.init(this.$refs.chinaMapChart)
          let option;
          //轨道地图数据
          const data = dtop;
          let img = document.createElement('img');
          img.src = (this.picpath == null || this.picpath == '') ? require('@/assets/images/map-default.png')
              : this.picpath;
          option = {
            tooltip: {
              trigger: 'item',
              formatter: (params) => {  // params就是数据，这里可以打印一下看看
                // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                if (typeof params.data[0] == 'undefined') {
                  return ``
                } else {
                  return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                }
              }
            },
            //backgroundColor:'#d0defa',//地图背景色
            title: {
              /* text: '机器人巡检轨迹图',*/
              left: 'center'
            },
            grid: {//底图四个方向调整
              top: '11%',
              bottom: '1%',
              left: '2%',
              right: '2%'
            },
            xAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            yAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false,  //刻度线
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            series: [
              {
                label: {
                  //color: '#cefc04',
                  show: true,
                  position: "top",
                  formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                  textStyle: { color: '#fcf804', fontSize: 7 }
                },
                id: 'a',
                /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
                type: 'line',
                smooth: true,// true 曲线
                itemStyle: {
                  // 设置线条颜色
                  normal: {
                    color: {
                      colorStops: [{
                        offset: 0.5, color: '#042f9b' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#032593' // 100% 处的颜色
                      }]
                    },
                    lineStyle: {
                      width: (this.picpath == null || this.picpath == '') ? 4 : 4,
                      type: (this.picpath == null || this.picpath == '') ? 'solid' : 'solid'//可选值还有 dotted  solid
                    }
                  }
                },
                symbolSize: 6,//巡检点大小
                symbol: 'image://' + point,//巡检点图标
                data: data,
                //  symbol: 'circle',
                markPoint: {
                  label: {
                    color: '#53fcb5',  // 文字颜色
                    // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                    show: true,
                    //formatter: '巡检机器人'// 自定义文字内容
                  },
                  //机器人大小
                  itemStyle: {
                    color: {
                      type: 'linear',
                      colorStops: [{
                        offset: 0, color: 'blue' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                      }]
                    }
                  },
                  //symbol: 'circle',
                  symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                  // 自定义图片作为标注展示
                  // symbolSize: [58, 38],  // 调整图片的长宽
                  // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                  symbolSize: 18,//机器人大小
                  data: [{//1机器人移动坐标位置
                    xAxis: xposition,
                    yAxis: yposition,
                    value: xjbh,
                    fontSize: 8
                  }
                  ],
                }
              },
              // 闪烁点的重点是以下配置
              {
                // 设置圆心点特效动画、大小
                type: 'effectScatter', data: dtop,
                symbolSize: 5,
                coordinateSystem: 'cartesian2d',
                // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                showEffectOn: 'render',
                // 涟漪特效配置
                rippleEffect: {
                  color: '#132be1',
                  scale: 4,
                  // 波纹的绘制方式,可选'stroke'和'fill'
                  brushType: 'stroke'
                },
                //圆心点
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: '#071cad',
                    shadowBlur: 80,
                    shadowColor: '#05399b',
                  }
                },
                zlevel: 1
              }
            ]
          }
          if (option && typeof option === 'object') {
            myChart.setOption(option);
          }
          window.addEventListener("resize", () => {
            if(myChart!=null)myChart.resize();
          });//电子地图同比缩放
        })
      }
    },//滤池运行评价指数
    pjzscharts() {
      let result = {
        total: 17289,
        value: 14638,
        color: '#0b2b6a'
      }
      result.rate = result.value / result.total.toFixed(4);
      let echartData = [
        {
          name: '数量',
          value: result.value,
          itemStyle: {
            normal: {
              color: result.color,
            },
          },
        },
        {
          name: '剩下',
          value: (result.total - result.value),
          itemStyle: {
            normal: {
              color: 'rgba(31, 110, 255, 0)',
            },
          },
        },
      ];
      let echartData2 = [
        {
          name: '数量',
          value: (result.total - result.value),
        },
        {
          name: '剩下',
          value: result.value,
          itemStyle: {
            normal: {
              color: 'rgba(31, 110, 255, 0)',
            },
          },
        },
      ];
      let option = {
        legend: {
          data: ['评价指标'],
          left: '6%',
          top: '4%',
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            color: '#67dcf2'
          },
          textStyle: {
            color: '#FFFFFF',
            fontSize: '8px'
          }
        },
        color: ['#134a9a'],/*图标色*/
        title: [
          {
            text: '评价指标',
            x: 'center',
            top: '64%',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 12,
              fontWeight: '100',
            },
          },
          {
            text: [9896 / 100] + '%',
            x: 'center',
            top: '50%',
            textStyle: {
              fontSize: 16,
              color: '#1ddd99',
              foontWeight: '500',
            },
          },
        ],
        polar: {
          radius: ['24%', '30%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '评价指标',
            type: 'pie',
            startAngle: 90,
            radius: ['60%', '80%'],
            center: ['50%', '60%', '50%', '40%'],
            data: echartData,
            hoverAnimation: false,
            label: {
              show: false,
            },
          },
          {
            type: 'pie',
            startAngle: (90 + (1 - result.rate) * 360),
            radius: ['60%', '72%'],
            center: ['50%', '60%', '50%', '40%'],
            color: '#9ca5ae',
            data: echartData2,
            hoverAnimation: false,
            label: {
              show: false,
            },
          },
        ],
      };
      //通过$ref进行挂载
      myChart1 = echarts.init(this.$refs.chart);
      myChart1.setOption(option);
      window.addEventListener("resize", () => {
        if(myChart1!=null)myChart1.resize();
      });//同比缩放
    },
    Timeclick() {
      this.isShow1 = false;
      this.isShow = true;
      this.isShow2 = false;
    },
    Daysclick() {
      this.isShow1 = true;
      this.isShow = false;
      this.isShow2 = false;
    },
    Monthclick() {
      this.isShow1 = false;
      this.isShow = false;
      this.isShow2 = true;
    }
  }
}
</script>
<style>
.home .content .contentLsft .Robot-par .par-title[data-v-2d65e41c] .el-input--medium .el-input__inner {
  border: none !important;
  background: transparent !important;
}
</style>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

@keyframes fadeUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.home {
  width: 100%;
  height: calc(100vh - 35px);
  background-image: url(../images/beijin.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
  //头部开始
  .header {
    width: 100%;
    height: 42px;
    background-image: url(../images/head.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    .header-title {
      width: 82%;
      display: flex;
      //background-color: #74C5F4;
      //justify-content: end;
      align-items: center;
      >p {
        letter-spacing:3px;
        width: 48%;
        margin-left: 46.5%;
        font-size: 36px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-style: italic;
        color: #FFFFFF;
        background: linear-gradient(0deg, #74C5F4 0%, #F3F6F0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .header-time {
      width: 15%;
      //background-color: aquamarine;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      p:nth-child(1) {
        font-size: 14px;
        font-family: Bahnschrift;
        font-weight: normal;
        color: #FFFFFF;
        margin-right: 10px;
      }
      p:nth-child(2) {
        font-size: 16px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
  //内容区域开始
  .content {
    width: 100%;
    //height: 100%;
    display: flex;
    //左边开始
    .contentLsft {
      width: 25%;
      min-height: calc(100vh - 110px);
      //background-color: #74C5F4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //机器人参数
      .Robot-par {
        width: 98%;
        height: 60%;
        //background-color: chocolate;
        display: flex;
        flex-direction: column;
        //justify-content: center;
        align-items: center;
        .par-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          //align-items: center;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
          ::v-deep .el-input--suffix .el-input__inner {
            width: 146px;
            height: 30px;
            line-height: 30px;
          }
          ::v-deep .el-input--medium .el-input__inner {
            border: none !important;
          }
        }
        .par-conter {
          width: 98%;
          height: 86%;
          //background-color: #b9e0f7;
          display: flex;
          flex-wrap: wrap;
          .par-conter1 {
            width: 50%;
            height: 45%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line1.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .par-conter2 {
            width: 50%;
            height: 45%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line2.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .par-conter3 {
            width: 50%;
            height: 45%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line3.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .par-conter4 {
            width: 50%;
            height: 45%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line4.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      //机器人运行数据
      .Robot-ope {
        width: 98%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-color: cadetblue;
        .ope-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          //align-items: center;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .ope-conter {
          width: 98%;
          height: 90%;
          display: flex;
          flex-wrap: wrap;
          //background-color: bisque;
          .ope-conter1 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/speed.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 46%;
                left: 45%;
                font-size: 14px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #9CE2FF 0%, #629DFF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                position: absolute;
                left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
          .ope-conter2 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/orientation.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 44%;
                left: 45%;
                font-size: 14px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #B5FCEF 0%, #85F297 99.4873046875%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              //position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                //position: absolute;
                //left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
          .ope-conter3 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/pattern.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 45%;
                left: 45%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #FF9CFC 0%, #6D62FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              //position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                //position: absolute;
                //left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
          .ope-conter4 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/distance.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 47.5%;
                left: 45%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #9CF7FF 0.2685546875%, #62E0FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              //position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                //position: absolute;
                //left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
        }
      }
    }
    //中边开始
    .contentCenter {
      width: 50%;
      //height: 498px;
      min-height: calc(100vh - 110px);
      //background-color: bisque;
      display: flex;
      flex-direction: column;
      justify-content: center;
      //监控视频画面
      .center-video {
        width: 99.8%;
        height: 68%;
        background-image: url(../images/video-frame.gif);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .box {
          width: 100%;
          height: 100% !important;
          display: flex;
          justify-content: center;
          align-items: center;
          //background: #000000;
          //border: 1px solid #00FF00;
          background-image: url(../../components/images/jiankong.png);
          background-repeat: no-repeat;
          background-position: center center;
        }
        .video-js {
          background-color: rgb(1 5 43);
          object-fit: fill;
          //隐藏video播放按钮
        }
        video {
          pointer-events: none;
        }
        //隐藏video播放按钮
        video::-webkit-media-controls-play-button {
          display: none !important;
        }
        //隐藏video音量进度条
        video::-webkit-media-controls-volume-slider {
          display: none !important;
        }
        //隐藏video音量按钮
        video::-webkit-media-controls-mute-button {
          display: none !important;
        }
        video::-webkit-media-controls-toggle-closed-captions-button {
          display: none !important;
        }
        //隐藏当前时间
        video::-webkit-media-controls-current-time-display {
          display: none !important;
        }
        //隐藏剩余时间
        video::-webkit-media-controls-time-remaining-display {
          display: none !important;
        }
        //隐藏进度条
        video::-webkit-media-controls-timeline {
          display: none !important;
        }
        //更多选项
        video::-internal-media-controls-overflow-button {
          display: none !important;
        }
      }
      //电子轨道地图
      .center-Trd {
        width: 99.8%;
        height: 32%;
        margin-top: 1%;
        //background-color: #74C5F4;
        //图标部分
        .Trd-icon {
          width: 99.8%;
          height: 16%;
          //background-color: #85F297;
          display: flex;
          justify-content: center;
          align-items: center;
          .Trd-icon1 {
            width: 85%;
            height: 100%;
            background-image: url(../images/color.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            // background-color: coral;
            display: flex;
            .Trd-icon1-1 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              //background-color: #8b7dd6;
              >img {
                width: 23px;
                height: 23px;
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                //line-height: 30px;
              }
            }
            .Trd-icon1-2 {
              width: 30%;
              height: 100%;
              //background-color: #6D62FF;
              display: flex;
              justify-content: center;
              align-items: center;
              >img {
                width: 28px;
                height: 16px;
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                //line-height: 30px;
              }
            }
            .Trd-icon1-3 {
              width: 34%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #184e77, #3c84bf);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-4 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #365084, #7a80fd);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-5 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #268c76, #1d83a7);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-6 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #264d8c, #1d7ca7);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-7 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #263f8c, #1d9ca7);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
          }
        }
        //电子地图部分
        .Trd-map {
          width: 99.8%;
          height: 83%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .Trd-map1 {
          width: 99.8%;
          height: 82%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #5DCBFF;
          font-size: 20px;
          letter-spacing: 2px;
        }
      }
    }
    //右边开始
    .contentRight {
      width: 25%;
      min-height: calc(100vh - 110px);
      //background-color: rgb(248, 191, 121);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //采集结果开始
      .Collection-result {
        width: 99%;
        height: 60%;
        //background-color: #7AF9FD;
        .cj-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          //align-items: center;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .cj-content {
          width: 99.8%;
          height: 66%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          overflow: hidden;
          /*隐藏溢出部分*/
          ::v-deep .el-table .cell {
            line-height: 15px !important;
          }
          //去掉li的小圆点
          .list {
            width: 100%;
            height: 100%;
            list-style: none;
            font-size: 12px;
            overflow: hidden;
            transition: transform 0.5s;
            /*添加动画效果*/
            //background-color: #85F297;
            li .span1 {
              display: block;
              width: 140px;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 溢出隐藏 */
              text-overflow: ellipsis; /* 溢出部分用省略号表示 */
            }
            li:nth-child(1) {
              margin-top: 5px;
            }
            li:nth-child(odd) {
              height: 35px;
              width: 100%;
              display: flex;
              //text-align: center;
              line-height: 35px; //
              background-image: url(../images/zhenchang.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #35A0F3;
              margin-bottom: 8px;
              animation: fadeUp 0.5s ease-in-out forwards;
              .span1 {
                margin-left: 42px;
              }
              span {
                display: block;
                margin-left: 20px;
              }
            }
            li:nth-child(even) {
              height: 35px;
              width: 100%;
              //background-color: #54e03e;
              display: flex;
              //text-align: center;
              line-height: 35px;
              background-image: url(../images/yichang.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #EF5400;
              margin-bottom: 8px;
              animation: fadeUp 0.5s ease-in-out forwards;
              .span1 {
                margin-left: 40px;
              }
              span {
                display: block;
                margin-left: 20px;
              }
            }
          }
          .fade-enter-active,
          .fade-leave-active {
            transition: opacity 0.5s;
            /*添加淡入淡出动画*/
          }
          .fade-enter,
          .fade-leave-to {
            opacity: 0;
            /*默认隐藏*/
          }
        }
      }
      //滤池运行评价指数
      .Filter {
        width: 99%;
        height: 40%;
        // background-color: #85F297;
        .Filter-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          >p {
            width: 90%;
            height: 100%;
            display: flex;
            //justify-content: center;
            align-items: center;
            //margin-top: 8px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .FilterBox {
          width: 100%;
          height: 86%;
          position: relative;
          .FilterBox1 {
            width: 88%;
            height: 10%;
            z-index: 999;
            // background-color: #85F297;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 60%;
            top: 5%;
            .time {
              width: 30%;
              height: 80%;
              cursor: pointer;
              >p {
                font-size: 10px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #c7cfd9;
              }
              >span {
                margin-left: 3px;
                width: 20px;
                height: 2px;
                display: block;
                background-color: #16A7EF;
              }
            }
            .days {
              width: 35%;
              height: 80%;
              cursor: pointer;
              >p {
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
              }
              >span {
                display: block;
                margin-left: 4px;
                width: 20px;
                height: 2px;
                background-color: #16A7EF;
              }
            }
            .month {
              width: 35%;
              height: 80%;
              cursor: pointer;
              >p {
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
              }
              >span {
                display: block;
                margin-left: 4px;
                width: 20px;
                height: 2px;
                background-color: #16A7EF;
              }
            }
          }
          .Filter-echarts {
            width: 100%;
            height: 98%;
            //background-color: #62E0FF;
          }
        }
      }
    }
  }
}
</style>

